{extend name="/layouts/base" /}

{block name="content"}

<div id="home" class="container-fluid">
    
    <div class="row mt-md-4 mt-2">
        <div class="col-xl-5 col-lg-6">
            
            <div class="row">
                <div class="col-lg-6">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-account-multiple widget-icon"></i>
                            </div>
                            <h5 class="text-muted fw-normal mt-0">文章</h5>
                            <h3 class="mt-3 mb-3">{{count.article || 0}}</h3>
                            <p class="mb-0 text-muted">
                                <span class="text-nowrap">您的文章有<span class="badge badge-info-lighten badge-pill">{{count.tag || 0}}个</span>标签</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-cart-plus widget-icon"></i>
                            </div>
                            <h5 class="text-muted fw-normal mt-0">分类</h5>
                            <h3 class="mt-3 mb-3">{{count.article_sort || 0}}</h3>
                            <p class="mb-0 text-muted">
                                <span class="text-nowrap">这是文章的分类</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-6">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-currency-usd widget-icon"></i>
                            </div>
                            <h5 class="text-muted fw-normal mt-0">评论</h5>
                            <h3 class="mt-3 mb-3">{{count.comments || 0}}</h3>
                            <p class="mb-0 text-muted">
                                <span class="text-nowrap">您参与了其中的<span class="badge badge-info-lighten badge-pill">{{count.my_reply || 0}}条</span>评论</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-pulse widget-icon"></i>
                            </div>
                            <h5 class="text-muted fw-normal mt-0">友链</h5>
                            <h3 class="mt-3 mb-3">{{count.links || 0}}</h3>
                            <p class="mb-0 text-muted">
                                <span class="text-nowrap">您拥有<span class="badge badge-info-lighten badge-pill">{{count.links_sort || 0}}个</span>友链分类</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-7 col-lg-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <h4 class="header-title mb-3">12天访问统计</h4>
                    
                    <div dir="ltr">
                        <div id="high-performing-product" class="apex-charts" data-colors="#727cf5,#e3eaef"></div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mt-2 mb-3">热门文章</h4>
                    <div class="table-responsive">
                        <table class="table custom table-centered mb-0">
                            <tbody>
                                <tr v-for="item in populars" :key="item.id">
                                    <td class="table-user">
                                        <img :src="item.expand.author.head_img" class="mr-1 rounded-circle">
                                        {{item.expand.author.nickname}}
                                    </td>
                                    <td>
                                        <h5 class="font-14 mb-1 font-weight-normal">{{item.title}}</h5>
                                        <span class="text-muted font-13">{{item.create_time}}</span>
                                    </td>
                                    <td>
                                        <h5 class="font-14 mb-1 font-weight-normal">{{item.views}}</h5>
                                        <span class="text-muted font-13">浏览</span>
                                    </td>
                                    <td>
                                        <h5 class="font-14 mb-1 font-weight-normal">{{item.expand.comments}}</h5>
                                        <span class="text-muted font-13">评论</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-lg-6 order-lg-1">
            <div class="card">
                <div class="card-body">
                    <div class="float-end">
                        <a href="javascript:;" class="darrow-none card-drop" data-bs-toggle="modal" data-bs-target="#system-cache-modal">
                            <i class="mdi mdi-delete-alert-outline"></i>
                        </a>
                    </div>
                    <h4 class="header-title mb-2">系统缓存</h4>
                    
                    <div data-simplebar style="max-height: 446px;">
                        <div id="system-cache" class="apex-charts mb-4 mt-4" data-colors="#727cf5,#0acf97,#fa5c7c,#ffbc00"></div>
                        <div class="chart-widget-list">
                            <p v-for="(item, index) in system.cache.data" :key="index">
                                <i class="mdi mdi-square" :style="'color: ' + system.cache.color[index]"></i>
                                {{item.name}}
                                <span class="float-end">{{computedBytes(item.size)}}</span>
                            </p>
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-lg-6 order-lg-1">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-2">最新评论</h4>
                    
                    <div data-simplebar style="max-height: 446px;"> 
                        <div v-for="item in comments.data" :key="item.id" class="d-flex align-items-start mb-3">
                            <img :src="item.expand.head_img" class="me-3 rounded-circle" width="40">
                            <div class="w-100 overflow-hidden">
                                <h5 class="mt-0 mb-1">
                                    <span class="me-1">{{item.nickname || ''}}</span>
                                    <span class="text-muted font-13">{{natureTime(item.create_time)}}</span>
                                </h5>
                                <span class="font-13">{{item.content || ''}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    <!-- 清理缓存 - modal - 开始 -->
    <div id="system-cache-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fill-primary-modalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content modal-filled bg-primary">
                <div class="modal-header">
                    <h4 class="modal-title" id="fill-primary-modalLabel">日志清理工具</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="p-2 font-1-3em border-bottom">
                        <svg t="1626257802473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="870" width="48" height="48"><path d="M580 888h296a20 20 0 0 1 20 20 20 20 0 0 1-20 20h-296a20 20 0 0 1-20-20 20 20 0 0 1 20-20zM493.2 877.28l15.52-58a20 20 0 0 1 24.48-14.08 20 20 0 0 1 14.16 24.48L531.84 888a20 20 0 0 1-24.56 14.16 20 20 0 0 1-14.08-24.88zM341.2 877.28l15.52-58a20 20 0 0 1 24.48-14.08 20 20 0 0 1 14.16 24.48L379.84 888a20 20 0 0 1-24.56 14.16 20 20 0 0 1-14.08-24.88zM417.2 877.28l15.52-58a20 20 0 0 1 24.48-14.08 20 20 0 0 1 14.16 24.48L456 888a20 20 0 0 1-24.56 14.16 20 20 0 0 1-14.24-24.88z" fill="#ffffff" p-id="871"></path><path d="M569.2 877.28l15.52-58a20 20 0 0 1 24.48-14.08 20 20 0 0 1 14.16 24.48L608 888a20 20 0 0 1-24.56 14.16 20 20 0 0 1-14.24-24.88z" fill="#ffffff" p-id="872"></path><path d="M684.32 849.52L655.36 760H324.72l-39.36 92.24a25.84 25.84 0 0 0-1.92 9.44 24 24 0 0 0 24 24h397.28a104 104 0 0 1-20.4-36.16zM298.32 720h386.08l38 117.2a64 64 0 0 0 20.88 30.32l37.12 29.68a16 16 0 0 1-10 28.48H307.44a64 64 0 0 1-64-64 63.36 63.36 0 0 1 5.2-25.12z" fill="#ffffff" p-id="873"></path><path d="M228 720h512a20 20 0 0 1 20 20 20 20 0 0 1-20 20h-512a20 20 0 0 1-20-20 20 20 0 0 1 20-20z" fill="#ffffff" p-id="874"></path><path d="M376 720h216v-16a40 40 0 0 0-40-40H416a40 40 0 0 0-40 40z m40-96h136a80 80 0 0 1 80 80v56H336v-56a80 80 0 0 1 80-80z" fill="#ffffff" p-id="875"></path><path d="M526.64 624l84.32-460.48a24.4 24.4 0 0 0 0-4.16A23.36 23.36 0 0 0 588 136h-9.28a40 40 0 0 0-39.36 32.8L456 624z m52.08-528h9.28a63.44 63.44 0 0 1 63.36 63.36 60 60 0 0 1-1.04 11.36L560 664H408l92-502.4a80 80 0 0 1 78.72-65.6z" fill="#ffffff" p-id="876"></path><path d="M250.48 397.04l8 20.56a32 32 0 0 0 17.76 17.76l20.56 8a8 8 0 0 1 4.48 10.4 8 8 0 0 1-4.48 4.48l-20.56 8a32 32 0 0 0-17.76 17.76l-8 20.56a8 8 0 0 1-14.88 0l-8-20.56a32 32 0 0 0-17.76-17.76l-20.56-8a8 8 0 0 1-4.48-10.4 8 8 0 0 1 4.48-4.48l20.56-8a32 32 0 0 0 17.76-17.76l8-20.56a8 8 0 0 1 10.4-4.48 8 8 0 0 1 4.48 4.48zM837.6 597.04l9.12 22.8a32 32 0 0 0 17.84 17.76l22.8 9.12a8 8 0 0 1 4.4 10.4 8 8 0 0 1-4.4 4.48l-22.8 9.12a32 32 0 0 0-17.84 17.84l-9.12 22.8a8 8 0 0 1-10.4 4.4 8 8 0 0 1-4.48-4.4l-9.12-22.8a32 32 0 0 0-17.76-17.84l-22.8-9.12a8 8 0 0 1-4.48-10.4 8 8 0 0 1 4.48-4.48l22.8-9.12a32 32 0 0 0 17.76-17.76l9.12-22.8a8 8 0 0 1 10.4-4.48 8 8 0 0 1 4.48 4.48z" fill="#ffffff" p-id="877"></path></svg>
                    共 <span class="text-success">{{computedBytes(system.cache.total)}}</span> 可清理，已选中 <span class="text-success">{{selectedCache || '0 KB'}}</span>
                        <div class="float-end">
                            <button v-on:click="clearCache()" type="button" class="btn btn-outline-light d-none d-lg-block flex-center">
                                <i class="mdi mdi-delete-alert-outline"></i> 立即清理
                            </button>
                        </div>
                    </div>
                    <div class="card-body pl-1 pb-0">
                        <div v-for="(item, index) in system.cache.data" :key="index" class="custom-control custom-checkbox mb-2">
                            <input v-on:click="computedSelected()" :id="'system-cache-select-' + index" :name="item.item" :sizes="item.size" type="checkbox" class="form-check-input me-1 custom-control-input checkbox-cache">
                            <label :for="'system-cache-select-' + index" class="custom-control-label cursor">
                                <span class="mr-2">{{item.name}}</span>
                                <span class="text-light">共 {{item.file_count}} 条数据，大小为 {{computedBytes(item.size)}}</span>
                                <span class="text-warning ml-2">( {{item.description}} )</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button v-on:click="clearCache()" type="button" class="btn btn-outline-light btn-block d-lg-none d-block flex-center">
                        <span v-if="load.cache" class="spinner-border text-light mr-1 wh-12em" role="status"></span>
                        <i v-else class="mdi mdi-delete-alert-outline"></i> 立即清理
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 清理缓存 - modal - 结束 -->
    
</div>
{/block}

{block name="script"}
<script src="{$CONFIG->ROOT}libs/apexcharts.min.js?v={$CONFIG->VERSION}"></script>
<script src="{$CONFIG->ROOT}js/pages/home.js?v={$CONFIG->VERSION}"></script>
{/block}